<template>
	<view class="page" >
		<image class="bjimg" :src="wxLoginBg" mode=""></image>
		<!-- <z-nav-bar :shadow="false" ></z-nav-bar> -->
		<!-- 公共组件-每个页面必须引入 -->
		<view class="auth">
			<button type="default" class="auth-btn" v-if="agree" open-type="getPhoneNumber" @getphonenumber="login">授权登录</button>
			<button type="default" class="auth-btn" v-else @click="login" >授权登录</button>
			
			<view class="protocol_box">
				<view class="select" :class="{active: agree}" @click="agree = !agree"></view>
				我已同意
				<text @click="onPageJump('/pages/user/protocol')">《用户协议》</text>
				和
				<text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>
			</view>
		</view>
		<public-module></public-module>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {onLogin} from '@/config/login';
	export default {
		data() {
			return {
				imgUrl: this.$http.baseUrl, // 服务器域名
				agree: false,
				user:'',
				p_id: '',
				wxLoginBg: '',
			};
		},
		onLoad() {
			this.wxLoginBg = this.$base.wxLoginBg;
			// this.check();
			var pid = uni.getStorageSync('p_id')
			if(pid){
				this.p_id = pid
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		methods:{
			...mapMutations(['setUserInfo','setBindUserInfoShow']),
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			check(callback){
				let user = this.userInfo;
				if(!user || !user.openid || user.expires_time < new Date().getTime()/1000 ){
					onLogin(callback)
				}else{
					callback  && callback()
				}
			},
			login(e){
				if (!this.agree) {
					uni.showToast({
						title: '请先同意《用户协议》和《隐私协议》',
						icon: 'none'
					});
					return;
				}
				if(e.detail.errMsg == "getPhoneNumber:ok"){
					this.$http.post('api/member/login',{'p_id':this.p_id,...e.detail,...this.userInfo}).then(res=>{
						console.log(res);
						this.setUserInfo(res);
						if (!res.avatar) {
							// 没有绑定过微信的头像或者昵称弹出授权获取头像昵称的弹窗
							this.setBindUserInfoShow(true);
						} 
						uni.navigateBack({
							delta:e
						})
					});
				}else{
					uni.showToast({
						title: '请允许授权',
						icon: 'none'
					});
				}
				this.check(()=>{
					
				})
				
				
				console.log(e);
				
			}
		}
	}
</script>

<style lang="scss">
	@import '@/style/mixin.scss';
.page{
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	position: fixed;
	.bjimg{
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;
		
	}
	.auth{
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		position: absolute;
		bottom: 160rpx;
		
		.auth-btn{
		
			text-align: center;
			background-color: $themeColor;
			color: #FFFFFF;
			font-size: 28rpx;
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
		}
		
		.protocol_box {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			font-size: 28rpx;
			color: #333333;
			.select {
				width: 36rpx;
				height: 36rpx;
				background-image: url("../../static/icon/ic_gender_unselected.png");
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100% auto;
				margin-right: 15rpx;
				&.active {
					background-image: url("../../static/icon/ic_agreed.png");
				}
			}
			>text {
				color: $themeColor;
			}
		}
	}
	
}
</style>
